<template>
  <div class="app-container">
    <el-form
      :show-message="!($route.query.isInfo || isInfo)"
      ref="elForm"
      :disabled="$route.query.isInfo || isInfo"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="120px"
    >
      <h2 style="text-align: center">内部审核内容</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="内审开始时间" prop="startAuditDate">
            <el-date-picker
              v-model="formData.startAuditDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择内审开始时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="内审结束时间" prop="endAuditDate">
            <el-date-picker
              v-model="formData.endAuditDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择内审结束时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="被审核部门" prop="deptId">
            <el-cascader
              ref="reference"
              :style="{ width: '100%' }"
              :props="{ value: 'id', checkStrictly: true }"
              :show-all-levels="false"
              placeholder="请选择部门"
              v-model="formData.deptId"
              :options="deptOptions"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="内审组组长" prop="leaderId">
            <UserDialog
              :disabled="$route.query.isInfo || isInfo"
              v-model="formData.leaderId"
              @change="changeUser"
            ></UserDialog>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="内审组成员" prop="userIdIn">
            <UserDialogSelection
              :disabled="$route.query.isInfo || isInfo"
              @change="changeOpen"
              placeholder="请选择内审组成员"
              v-model="formData.userIdIn"
            ></UserDialogSelection>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="是否启用" prop="effectStatus">
        <el-switch
          v-model="formData.effectStatus"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item label="审核要素" prop="element">
        <el-input
          v-model="formData.element"
          type="textarea"
          placeholder="请输入多行文本审核要素"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入多行文本备注"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <h4 class="form-header h4">
        具体工作安排
        <el-button type="primary" plain size="mini" @click="handleAdd"
          >增行</el-button
        >
        <el-button type="danger" plain size="mini" @click="handleDele"
          >删行</el-button
        >
      </h4>
      <el-table :data="formData.itemList" :border="true" style="width: 100%">
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column
          v-model="userIdList"
          label="人员"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.userId`"
              :rules="rules.userId"
            >
              <UserDialog
                :disabled="$route.query.isInfo || isInfo"
                @change="chanageUser($event, scope.$index)"
                v-model="scope.row.userId"
              ></UserDialog>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="具体工作" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.doWork`"
              :rules="rules.doWork"
            >
              <el-input
                v-model="scope.row.doWork"
                placeholder="请输入具体工作"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" v-if="btnShow">
        <el-form-item
          label-width="0"
          style="text-align: center; margin-top: 30px"
        >
          <el-button
            v-if="!($route.query.isInfo || isInfo)"
            type="primary"
            @click="submitForm"
            >提交</el-button
          >
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import store from "@/store";
import { deptTreeSelect } from "@/api/system/user";

import {
  auditPlanAdd,
  updategauditPlan,
  auditPlanInfo,
} from "@/api/quality/inAudit.js";

export default {
  components: {},
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      postOptions: [],
      formData: {
        itemList: [{ doWork: "", userId: "", userName: "" }],
        startAuditDate: undefined,
        startAuditDate: undefined,
        leaderId: undefined,
        element: undefined,
        remark: undefined,
        deptId: undefined,
        userIdIn: undefined,

        startDate: "",
        applyDate: null,
        toOfficialDate: "",
        tryEndDate: "",
      },
      rules: {
        element: [
          {
            required: true,
            message: "请输入审查要素",
            trigger: "blur",
          },
        ],
        endAuditDate: [
          {
            required: true,
            message: "请选择内审开始时间",
            trigger: "change",
          },
        ],
        startAuditDate: [
          {
            required: true,
            message: "请选择内审结束时间",
            trigger: "change",
          },
        ],
        leaderId: [
          {
            required: true,
            message: "请选择组长",
            trigger: "change",
          },
        ],
        deptId: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change",
          },
        ],
        userIdIn: [
          {
            required: true,
            message: "请选择组员",
            trigger: "change",
          },
        ],
        userId: [
          {
            required: true,
            message: "请选择人员",
            trigger: "change",
          },
        ],
        doWork: [
          {
            required: true,
            message: "请输入具体工作",
            trigger: "blur",
          },
        ],
      },
      userList: [],
      deptId: [],
      deptOptions: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    }

    this.getDeptTree();
  },
  mounted() {},
  methods: {
    chanageUser(e, i) {
      this.formData.itemList[i].userName = e.nickName;
    },
    handleAdd() {
      this.formData.itemList.push({ doWork: "", userId: "", userName: "" });
    },
    handleDele() {
      if (this.formData.itemList.length == 1) return;
      this.formData.itemList.pop();
    },
    changeOpen(e) {
      console.log(e);
      this.formData.userList = e.map((i) => {
        return { userId: i.userId, userName: i.nickName };
      });
    },
    changeUser(e) {
      console.log(e);
      this.formData.leaderName = e.nickName;
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    getinfo() {
      return auditPlanInfo(this.$route.query.id || this.id).then((response) => {
        this.formData = response.data;
        this.formData.userIdIn = response.data.userList.map((e) => e.userId);
        console.log(this.formData.userIdIn);
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          query.deptId = this.$refs.reference.getCheckedNodes()[0].value;
          query.deptName = this.$refs.reference.getCheckedNodes()[0].label;
          if (this.formData.innerAuditPlanId != undefined) {
            updategauditPlan(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            auditPlanAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
      // if (this.$route.query.iszzlist) {
      //   const obj = { path: "./zzsqList" };
      //   this.$tab.closeOpenPage(obj);
      // } else {
      //   const obj = { path: "./contract" };
      //   this.$tab.closeOpenPage(obj);
      // }
    },
  },
};
</script>
